<?php
$this->pageTitle = '美味推荐';
?>
<style>
    /* qqshop focus */
    #focus {width:100%; height:290px; overflow:hidden; position:relative;}
    #focus ul {height:290px; position:absolute;}
    #focus ul li {float:left; width:980px; height:290px; overflow:hidden; position:relative; background:#000;}
    #focus ul li.b1{background:#f4ede5;}
    #focus ul li.b2{background:#acc02d;}
    #focus ul li .imgfocus{width:1200px;margin:0px auto;}
    #focus ul li img{width:1200px;}
    #focus .preNext {width:60px; height:60px; position:absolute; top:95px;  cursor:pointer;}
    #focus .pre {left:0;background:url('./images/banner/banner_btn_l_24.png') no-repeat 0 0;}
    #focus .next {right:0;background:url('./images/banner/banner_btn_r_24.png') no-repeat 0 0;}
    .btncommon{width:1200px;margin:0px auto;position: relative;}
</style>
<script type="text/javascript">
    $(function() {
        var sWidth = $("#focus").width(); //获取焦点图的宽度（显示面积）
        var len = $("#focus ul li").length; //获取焦点图个数
        var index = 0;
        var picTimer;
        var winWidth = $(window).width();

        //以下代码添加数字按钮和按钮后的半透明条，还有上一页、下一页两个按钮
//        var btn = "<div class='btnBg'></div><div class='btn'>";
//        for (var i = 0; i < len; i++) {
//            btn += "<span></span>";
//        }
//        btn = "</div><div class='preNext pre'></div><div class='preNext next'></div>";
//        $("#focus").append(btn);
        $("#focus").find("li").width(winWidth);
//        $("#focus .btnBg").css("opacity", 0.5);

        //为小按钮添加鼠标滑入事件，以显示相应的内容
//        $("#focus .btn span").css("opacity", 0.4).mouseenter(function() {
//            index = $("#focus .btn span").index(this);
//            showPics(index);
//        }).eq(0).trigger("mouseenter");

        //上一页、下一页按钮透明度处理
        $("#focus .preNext").css("opacity", 0.5).hover(function() {
            $(this).stop(true, false).animate({"opacity": "1"}, 300);
        }, function() {
            $(this).stop(true, false).animate({"opacity": "0.5"}, 300);
        });

        //上一页按钮
        $("#focus .pre").click(function() {
            index -= 1;
            if (index == -1) {
                index = len - 1;
            }
            showPics(index);
        });

        //下一页按钮
        $("#focus .next").click(function() {
            index += 1;
            if (index == len) {
                index = 0;
            }
            showPics(index);
        });

        //本例为左右滚动，即所有li元素都是在同一排向左浮动，所以这里需要计算出外围ul元素的宽度
        $("#focus ul").css("width", sWidth * (len));

        //鼠标滑上焦点图时停止自动播放，滑出时开始自动播放
        $("#focus").hover(function() {
            clearInterval(picTimer);
        }, function() {
            picTimer = setInterval(function() {
                showPics(index);
                index++;
                if (index == len) {
                    index = 0;
                }
            }, 4000); //此4000代表自动播放的间隔，单位：毫秒
        }).trigger("mouseleave");

        //显示图片函数，根据接收的index值显示相应的内容
        function showPics(index) { //普通切换
            var nowLeft = -index * sWidth; //根据index值计算ul元素的left值
            $("#focus ul").stop(true, false).animate({"left": nowLeft}, 300); //通过animate()调整ul元素滚动到计算出的position
            $("#focus .btn span").stop(true, false).animate({"opacity": "0.4"}, 300).eq(index).stop(true, false).animate({"opacity": "1"}, 300); //为当前的按钮切换到选中的效果
        }
    });

</script>
<div id="focus">
    <ul>
        <li class="b1">
            <div class="imgfocus">
                <a href="#" target="_blank"><img src="./images/banner/1.jpg"/></a>
            </div>
        </li>
        <li class="b2">
            <div class="imgfocus">
                <a href="#" target="_blank"><img src="./images/banner/2.jpg"/></a>
            </div>
        </li>
    </ul>
    <div class="btncommon">
        <div class="preNext pre" style="opacity: 0.5;"></div>
        <div class="preNext next" style="opacity: 0.5;"></div>
    </div>
</div>
<div class="wp">
    <div class="bannerin cl">
        <div class="z"><a href="<?php echo Yii::app()->createUrl('activity/index', array('s' => 'pm')); ?>"><img src="./images/banner/b_l_pm.jpg"/></a></div>
        <div class="y"><a href="<?php echo Yii::app()->createUrl('activity/index', array('s' => 'ten')); ?>"><img src="./images/banner/b_r_10ren.jpg"/></a></div>
    </div>
</div>
<div class="wp cl">
    <div class="introduce cl">
        <div class="text z">
            <h3>白领用餐推荐</h3>
            <p>工作也要享美食。<br/>美味的工作餐能迅速调节心态，让繁重的工作变得充满期待。灵动生活为您精选适宜办公用餐，注重营养搭配，工作美味两不误。</p>
            <a href="#" class="more f_16 c_orange">查看更多套餐</a>
        </div>
        <div class="intimg y">
            <ul class="cl">
                <?php foreach ($row_ol as $key => $value) { ?>
                    <?php if ($value['status'] == 1) { ?>
                        <li<?php if ($key == 0): ?> class="fst"<?php endif; ?> id="p<?php echo $value['id']; ?>">
                            <a href="<?php echo Yii::app()->createUrl('site/product', array('id' => $value['productSkuId'])); ?>">
                                <img src="<?php echo $value['productImg']['0']; ?>" width="<?php echo $key == 0 ? '450' : '210'; ?>" height="<?php echo $key == 0 ? '300' : '145'; ?>"/>
                                <div class="names"><?php echo $value['name']; ?></div>
                            </a>
                        </li>
                        <?php
                    }
                }
                ?>
            </ul>
        </div>
    </div>
    <div class="sweet cl tm10">
        <div class="text z">
            <h3>清爽一夏</h3>
            <p class="clmg_t">天热食欲不佳？这里汇聚新鲜甜品饮品，迅速解暑。</p>
        </div>
        <div class="y more"><a href="#" class="f_16 c_orange">查看更多套餐</a></div>
    </div>
    <div class="sweetlayer">
        <ul class="tm10 cl sweetul">
            <?php foreach ($row_summer as $key => $value) { ?>
                <?php if ($value['status'] == 1) { ?>
                    <li<?php if ($key == 0): ?> class="fst"<?php endif; ?> id="p<?php echo $value['id']; ?>">
                        <a href="<?php echo Yii::app()->createUrl('site/product', array('id' => $value['productSkuId'])); ?>">
                            <img src="<?php echo $value['productImg']['0']; ?>" width="288" height="200"/>
                            <div class="names"><?php echo $value['name']; ?></div>
                        </a>
                    </li>
                    <?php
                }
            }
            ?>
        </ul>
    </div>
    <div class="weekinc tm20">
        <span>灵动一周美食精选</span>
    </div>
    <div class="xbinc tm20">
        <ul class="cl index_hot">
            <?php foreach ($model as $key => $value) { ?>
                <?php if ($value['status'] == 1) { ?>
                    <li class="foodlayer" id="p<?php echo $value['id']; ?>">
                        <div class="food_img">
                            <a href="<?php echo Yii::app()->createUrl('site/product', array('id' => $value['productSkuId'])); ?>">
                                <img src="<?php echo $value['productImg']['0']; ?>" align="absmiddle"/>
                                <span class="areatips"></span>
                                <span class="areatips_txt"><?php echo $value['restaurantName']; ?></span>
                            </a>
                        </div>
                        <div class="food_desc">
                            <h3><a href="<?php echo Yii::app()->createUrl('site/product',array('id' => $value['productSkuId'])); ?>"><?php echo $value['name']; ?></a></h3>
                            <p>￥<b><?php echo number_format($value['skuPrice'], 2); ?></b><span>门店价&nbsp;<i>￥<?php echo number_format($value['oriPrice'], 2); ?></i></span></p>
                        </div>
                        <div class="food_footer cl">
                            <div class="z sellnum">已售<b><?php echo $value['saleCount']; ?></b></div>
                            <div class="y eva">
                                <a href="<?php echo Yii::app()->createUrl('site/product',array('id' => $value['productSkuId'],'#'=>'tab2')); ?>" class="cl" target="tab2">
                                    <span class="starbg z" style="margin:6px 10px 0px 0px;">
                                        <span class="starcover" style="width:80%;"></span>
                                    </span>
                                    <span class="z"><?php echo $value['commontCount']; ?>&nbsp;人评价</span>
                                </a>
                            </div>
                        </div>
                    </li>
                    <?php
                }
            }
            ?>
        </ul>
    </div>
</div>
<!--<script>
    $(".tab-out").tabs();
</script>-->